<template>
    <Dialog :title="title" :show="true" @close="cancel" :width="300" height="auto" :left="uiLeft" :top="uiTop">
        <div class="box">
            <div class="prop-panel">

                <div class="prop-top">
                    <div class="item1">
                        <div>是否编辑：</div>
                        <div class="edit">
                            <el-switch v-model="editingRef" size="small" />
                            <el-button @click.stop="draw"> 重新绘制</el-button>
                        </div>
                    </div>
                    <div class="item1">
                        <div class="key">棱柱尺寸:</div>
                        <el-input type="number" v-model="columnSize" placeholder="请输入尺寸" :min="1"
                            @change="changeValue('columnSize', $event)" />
                    </div>
                    <div class="item1">
                        <div class="key">棱柱高度:</div>
                        <el-input type="number" v-model="columnHeight" placeholder="请输入高度" :min="1"
                            @change="changeValue('columnHeight', $event)" />
                    </div>
                    <div class="item1">
                        <div class="key">拦截网长度:</div>
                        <el-input type="number" v-model="brandLength" placeholder="请输入长度" :min="1"
                            @change="changeValue('brandLength', $event)" />
                    </div>
                    <div class="item1">
                        <div class="key">拦截网高度:</div>
                        <el-input type="number" v-model="brandHeight" placeholder="请输入高度" :min="1"
                            @change="changeValue('brandHeight', $event)" />
                    </div>
                    <div class="item1">
                        <div class="key">拦截网宽度:</div>
                        <el-input type="number" v-model="brandWidth" placeholder="请输入宽度" :min="1"
                            @change="changeValue('brandWidth', $event)" />
                    </div>
                    <div class="item1">
                        <div class="key">编辑模式:</div>
                        <el-select v-model="analysisModeValue" placeholder="请选择">
                            <el-option v-for="item in analysisMode" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div>

            </div>
        </div>
    </Dialog>

</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import {
    toVR,
    createVueDisposer
} from "earthsdk-ui";
import { getsceneObjNumfromSceneTree, processNum } from "@/scripts/utils";

const props = withDefaults(defineProps<{ title: string, sceneObject: any, createOrEdit: string }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel");
};

const uiLeft = document.body.clientWidth - 10 - 300;

const uiTop = document.body.clientHeight - document.body.clientHeight / 2;


const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const modelserSceneTreeWrapper = objm.modelserSceneTreeWrapper

const modelserManager = objm.modelserManager
const editPolygon = modelserManager.editPolygon;


let editingRef: any;
const brandHeight = ref(6);
const brandLength = ref(2);
const brandWidth = ref(2);
const columnSize = ref(1);
const columnHeight = ref(3);
const analysisModeValue = ref("1");

// 裁剪方式
const analysisMode = [
    {
        value: "1",
        label: "裁剪",
    },
    {
        value: "2",
        label: "压平",
    },
];
const init = () => {
    editingRef = toVR<any>(d, [props.sceneObject, "positionEditing"])
    // editingRef.value = true

    brandHeight.value = processNum(props.sceneObject.brandHeight) ?? 6
    brandLength.value = processNum(props.sceneObject.brandLength) ?? 2
    brandWidth.value = processNum(props.sceneObject.brandWidth) ?? 2
    columnSize.value = processNum(props.sceneObject.columnSize) ?? 1
    columnHeight.value = processNum(props.sceneObject.columnHeight) ?? 3
    analysisModeValue.value = props.sceneObject.start.operation ?? "1"

}

watch(() => props.sceneObject, (newVal, oldVal) => {
    init()
}, { immediate: true })

watch([brandHeight, brandLength, brandWidth, columnSize, columnHeight, analysisModeValue], () => {
    props.sceneObject.brandHeight = Number(brandHeight.value);
    props.sceneObject.brandLength = Number(brandLength.value);
    props.sceneObject.brandWidth = Number(brandWidth.value);
    props.sceneObject.columnHeight = Number(columnHeight.value);
    props.sceneObject.columnSize = Number(columnSize.value);
    props.sceneObject.start.operation = analysisModeValue.value as "1" | "2";
    props.sceneObject.end.operation = analysisModeValue.value as "1" | "2";
    props.sceneObject.brand.operation = analysisModeValue.value as "1" | "2";
})


// 重新绘制
const draw = () => {
    if (props.sceneObject.positionEditing) {
        props.sceneObject.positionEditing = false;
    }
    props.sceneObject.points = []
    props.sceneObject.positionEditing = true;

};

const changeValue = (type: any,val: string) => {
  // 将输入值强制转换为数字，并确保不小于 0.1
  const numValue = Number(val);
  if (numValue <= 0 || isNaN(numValue)) {
    if(type === "brandHeight"){
      brandHeight.value = 1;
    }else if(type === "brandLength"){
      brandLength.value = 1;
    }else if(type === "brandWidth"){
      brandWidth.value = 1;
    }else if(type === "columnSize"){
      columnSize.value = 1;
    }else if(type === "columnHeight"){
      columnHeight.value = 1;
    }
  }
}

onMounted(() => {

});
onBeforeUnmount(() => {
    props.sceneObject.editing = false
});
</script>

<style scoped>
.box {
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.prop-panel {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.prop-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item1 {
    display: grid;
    grid-template-columns: 95px 1fr;
    align-items: center;
    margin-bottom: 10px;
}



.prop-bottom {
    display: flex;
    justify-content: flex-end;
}

.el-input-number--small {
    width: 90px;
}

.edit {
    display: flex;
    gap: 20px;
    align-items: center;
}
</style>
